<template>
	<view class="hezi">
		<!--输入弹框 -->
		<uni-popup :show="inputmodel" position="bottom" mode="fixed" @hidePopup="inputmodel1()">
			<view class="modetitle f17 text-c por">
				<image src="../../static/close.png" class="closeicon" @click="inputmodel = false"></image>
				<view class="f22 fwb">
					<view class="tetx--left">{{paymachinename}}</view>
				</view>
				<view class="fsc f16 mt20 f600">
					<view class="">{{i18n.shul}}</view>
					<inputnumber v-model="paynumber" :min="1" @change="bindChange"></inputnumber>
				</view>
				<view class="fsc f16 mt16 f600">
					<view class="">{{i18n.jine}}</view>
					<view class="color-yellow f20 fwb">{{totalPrice}} USDT</view>
				</view>
				<view class="fac paybutton f16" @click="gopay">{{i18n.ljzf}}</view>
			</view>
		</uni-popup>
		
		<view class="banner pt136">
			<swiper :indicator-dots="true" indicator-color="rgba(255,255,255,.4)" indicator-active-color="#FFFFFF" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(bitem,bkey) in banerList" :key="bkey" style="">
					<view class="swiper-item" style="padding:0 30rpx;">
						<image :src="bitem.imgUrl" style="height: 300upx;width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="noticerecord">
			<navigator class="fcs titlebox" url="notice">
				<image src="../../static/noticeld.png" mode="" class="mgr8" style="width: 32rpx;height: 32rpx;"></image>
				<view class="title f12">{{list}}</view>
			</navigator>
			<view class="fac mgt24">
				<navigator class="fcac" :url="'./tuoguanrecord?list='+JSON.stringify(mainErea)">
					<image src="../../static/tgrecord.png" mode=""></image>
					<view class="mt7 f12">{{i18n.tgsyjl}}</view>
				</navigator>
				<navigator class="fcac" :url="'./salerecord?list='+JSON.stringify(mainErea)">
					<image src="../../static/xsrecord.png" mode=""></image>
					<view class="mt7 f12">{{i18n.xstcjl}}</view>
				</navigator>
				<navigator class="fcac" :url="'./distriburecord?list='+JSON.stringify(mainErea)">
					<image src="../../static/jxrecord.png" mode=""></image>
					<view class="mt7 f12">{{i18n.jxtcjl}}</view>
				</navigator>
			</view>
		</view>
		<view class="area mgt10">
			<view class="fcs">
				<view class="mgr8 orangek"></view>
				<view class="f14 f600">{{i18n.kjsb}}</view>
			</view>
			<view class="fsb mt10 vfs">
				<view class="fcc mitems" v-for="(mitem,mindex) in mainErea" :key="mindex">
					<image :src="mitem.image" mode="aspectFill" class="minericon"></image>
					<view class="ml10">
						<view class="f12">{{mitem.name}}</view>
						<navigator class="mt5 color-gray f11" :url="'./equiplist?id='+mitem.id">{{i18n.ckqbsb}} ></navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="fcs innovatearea white mx15">
			<view class="mgr8 orangek"></view>
			<view class="f14 f600">{{i18n.rmkj}}</view>
		</view>
		<!--热门矿机  -->
		<view class="mx15 mt10">
			<view class="bgcc bor5 mb10 white py15 px10" v-for="(item,index) in hotMachine" :key="index"  @click="gotoDetail(item.id)">
				<view class="f14 f600">{{item.name}}</view>
				<view class="">
					<view class="content fcs mt12">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="ml10 flex-1">
							<view class="fcs ">
								<view class="f15 color-theme f600">{{item.storageCapacity}} T</view>
								<view class="f12 color-gray ml5">{{i18n.ccrl}}</view>
							</view>
							<view class="fsb mt8">
								<view class="f12  color-gray">
									<view class="">{{i18n.kc}}:{{(item.sumNumber)-(item.hasBuy)}}</view>
									<view class="mt2">{{i18n.fwf}}:{{item.serviceCharge*100}}%</view>
								</view>
								<view class="fcs color-yellow">
									<view class="f15 mgr4 f600">{{item.price}}</view>
									<view class="f12 f600 ">USDT/{{i18n.tai}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="pro mt15">
						<view class=" fcc">
							<view class="por bgcc progressbox">
								<view class="poa hasbuy" :style="{width:((item.hasBuy)/(item.sumNumber)*100)+'%'}"></view>
							</view>
							<text class="f11 ml8 color-gray">{{i18n.ys}}{{((item.hasBuy)/(item.sumNumber)*100).toFixed(2)}}%</text>
						</view>
						<view class="gobuy white bg-theme f14 poa py6 px23 bor5" @click.stop="openinputmodel(item,item.id)">{{i18n.qgm}}</view>
					</view>
				</view>
			</view>
		</view>
		<password :show="payShow" @close='payCloseFunc' @finish="submit" ref="payword"></password>
	</view>
</template>

<script>
	import inputnumber from '../../components/inputnumber.vue';
	import password from '../../components/payPassword/pay_Password.vue';
	import myPoup from "../../components/uni-popup/uni-popup.vue"
	import aa from "../../components/popup/uni-popup/uni-popup.vue"
	export default {
		data() {
			return {
				banerList: [], //轮播图
				mainErea: [],
				hotMachine: [], //热门矿机
				paymachinename: "",
				paynumber: 1,
				payUsdt: "",
				payShow: false,
				Mark: false,
				inputmodel: false,
				noticeContent: "",
				paymodel: false,
				checkmodel: false,
				payword: "",
				list: "",
				url: ""
			};
		},
		computed: {
			totalPrice() {
				var number = this.payUsdt * this.paynumber
				number = String(number).replace(/^(.*\..{4}).*$/, "$1");
				number = Number(number); // number = 12.3321
				return number
			},
			i18n() {
				return this.$t('home');
			}
		},
		components: {
			password,
			inputnumber,
			uniPopup: aa,
			myPoup
		},

		onLoad() {
			if(!uni.getStorageSync('token'))return
			this.getNotice()
			this.getBanner()
		},
		onShow() {
			uni.setTabBarItem({ index: 0, text: this.$t('tabber.home') })
			uni.setTabBarItem({ index: 1, text: this.$t('tabber.news') })
			uni.setTabBarItem({ index: 2, text: this.$t('tabber.assets') })
			uni.setTabBarItem({ index: 3, text: this.$t('tabber.user') })
			if(!uni.getStorageSync('token'))return
			this.getMinerList()
			this.getHotList()
		},
		methods: {
			async getMinerList(){
				let { data } = await this.$http.post('index.getMineType', {}, { isAuth: true, tipConfig: { isLoading: false } });
				this.mainErea = data
			},
			async getHotList(){
				let { data } = await this.$http.post('index.getHotMineList', {}, { isAuth: true, tipConfig: { isLoading: false } });
				this.hotMachine =data
			},
			async getBanner(){
				let { data } = await this.$http.post('index.getBannerList', {}, { isAuth: true, tipConfig: { isLoading: false } });
				this.banerList =data
			},
			async getNotice(){
				let params = {
					page: 1,
					size: 10
				}
				let { data } = await this.$http.post('notice.getNoticList', params, { isAuth: true, tipConfig: { isLoading: false } });
				this.list =data.records[0].noticeTitle
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: "./equipdetail?id=" + id
				})
			},
			cancel() {
				this.Mark = false
			},
			openinputmodel(ite,id) {
				this.payid = id
				this.paymachinename = ite.name
				this.payUsdt = ite.price
				this.inputmodel = true
			},
			inputmodel1() {
				this.inputmodel = false
				this.paynumber = 1
			},
			paymodel1() {
				this.paymodel = false
			},
			closeModel() {
				this.$refs.popup.close()
			},
			bindChange(e) {
				// console.log(e);
			},
			payCloseFunc(bool) {
				this.payShow = false
				this.paymodel = false
			},
			gopay() {
				this.inputmodel =false
				this.payShow = true
			},
			//支付弹框隐藏
			togglePayPopup() {
				this.payVisible = false;
				this.$refs.payword.close();
			},
			submit(e) {
				let params = {
					count: this.paynumber,
					password: e,
					mineId: this.payid,
					phoneId:this.UID
				}
				this.$http.post("index.buyMine", params).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.navigateTo({
							url: "./buysuccess?price=" + this.totalPrice
						})
					}

				}).catch(e => {
					this.checkmodel = false
					this.$refs.payword.close();
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				})
			},
		}
	};
</script>

<style lang="less">
	/deep/ .uni-input-placeholder {
		text-align: right !important;
	}
	.vfs{
		overflow: scroll;
	}
	.mitems{
		flex-basis:200rpx;
		flex-shrink: 0;
		white-space: nowrap;
		margin-right: 30rpx;
	}
	.minericon{
		width: 120rpx;
		height: 130rpx;
	}
	.closeicon{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top:30rpx;
		right: 30rpx;
	}
	.pay {
		width: 628rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		opacity: 1;
		background: #1372df;
		text-align: center;
		border-radius: 8rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.dash1 {
		padding: 0 54rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.small {
			width: 116rpx;
			height: 2rpx;
			background-color: #dbdcdd;
		}
	}

	.dash {
		width: 100%;
		height: 16rpx;
		background-color: #f3f5f9;
	}

	.itembox {
		width: 690rpx;
		padding: 0 0rpx 36rpx 0rpx;
		border-bottom: 2rpx solid #ccc;
		margin-left: auto;
		margin-right: auto;

		.buttonable {
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #1372df;
			border-radius: 6rpx;
			color: #fff;
		}

		.buttondisable {
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			opacity: 1;
			background: #efefef;
			border-radius: 6rpx;
			color: #6d7278;
		}

		input {
			text-align: right;
		}
	}
	.popupcontent {
		font-size: 28rpx;
		line-height: 44rpx;
		overflow-y: scroll;
		height: 600rpx;
		text-align: left;
		padding: 0rpx 36rpx 36rpx 36rpx;
		width: 600rpx;
		display: block;
		position: relative;
	}

	page {
		padding-bottom: 60rpx;
	}

	.areabox {
		flex-wrap: wrap;

		.item {
			margin-bottom: 40rpx;
		}
	}

	.banner {
		.title {
			padding-top: 60rpx;
			padding-left: 18rpx;
			font-weight: 600;
		}

		.swiper {
			display: block;
			width: 678rpx;
			height: 290rpx;
			margin-top: 32rpx;
			margin-left: auto;
			margin-right: auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.noticerecord {
		width: 100%;
		color: #fff;
		image {
			width: 64rpx;
			height: 64rpx;
		}

		.titlebox {
			padding-top: 28rpx;
			padding-left: 30rpx;
		}

		.title {
			width: 464rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.orangek {
		width:4rpx;
		height: 24rpx;
		opacity: 1;
		background: #007AFF;
	}
	.area {
		color: #fff;
		padding: 44rpx 30rpx 52rpx;
	}

	.content {
		image {
			width: 120rpx;
			height: 130rpx;
		}
	}

	.pro {
		position: relative;
		.progressbox {
			width: 230rpx;
			height: 8rpx;
			background-color: #586471;
		}
		.hasbuy{
			background-color: #FF9439;
			height: 8rpx;
			left: 0;
			top:0
		}
		.sale {
			position: absolute;
			top: 0;
			left: 69%;
		}

		.gobuy {
			right: 0;
			bottom: 8rpx;
		}
	}

	/deep/ p {
		font-size: 24rpx;
		margin-left: 80rpx !important;
	}
	.modetitle {

		background-color: #fff;
		padding: 30rpx;
		width: 690rpx;
		// padding-top: 60rpx;
		// padding-bottom: 86rpx;
	}

	.paybutton {
		width: 100%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
		background-color: #1372df;
		margin-top: 20rpx;
	}

	.myPoup {
		position: relative;

		.cancelpay {
			position: fixed;
			top: 20%;
			right: 10%;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.inputbox {
		transform: translateY(-110rpx);
	}
</style>
